<template>
    <div class="bigbox">
        <div class="box1">
            <a @click="back"></a><span>商品详情</span>
        </div>

        <div class="box2">
            <!--轮播图-->
            <!-- <div id="demo" class="carousel slide" data-ride="carousel" style="height: 350px; margin-top: 50px">
                <div class="carousel-inner" style="height: 100%">
                    <div class="carousel-item active" style="">
                        <img src="../../public/img/xlb1.jpg" style="width: 100%; height: 100%"/>
                    </div>
                    <div class="carousel-item" style="">
                        <img src="../../public/img/xlb2.jpg" style="width: 100%" />
                    </div>
                </div>
            </div> -->
            <img :src="obj1.src" alt="" width="100%">
        </div>

        <!--文本-->
        <div class="section">
            <div class="xiao1">
                <p>￥{{obj1.money}}</p>
                <p>{{obj1.title}}</p>
            </div>
            <div class="xiao2">
                <p>活动：<span>[最新优惠券]</span></p><span>立即领取<i class="iconfont iconyoujiantou"></i></span>
            </div>
            <!-- <div class="xiao3"> 
                <p v-on:click="flag=!flag">选择商品规格</p><i class="iconfont iconyoujiantou"></i>
            </div> -->
        </div>
        <div style="border-top: 10px solid #eeeeee"></div>
        <!--弹框-->
        <div class="tan" :class="{btn:flag,btn1:!flag}">
            <div class="one">
                <!--图片-->
                <div>
                    <img :src="obj1.src" alt="">
                </div>
                <!--文本-->
                <div>
                    <p>{{obj1.title}}</p>
                    <p><span>￥{{qian}}</span><span>￥{{qian}}</span></p>
                    <p>已选：<span>{{span}}</span></p>
                </div>
                <!--关闭按钮-->
                <div v-on:click="flag=!flag">X</div>
            </div>
            <!--two-->
            <div class="two">
                <div class="small">
                    <p style="font-weight: bold">规格</p>
                    <div>
                        <p :class="{change:flag1==0}" @click="gui1">吊坠</p>
                        <p :class="{change:flag1==1}" @click="gui2">白18k金</p>
                        <p :class="{change:flag1==2}" @click="gui3">K链套餐</p>
                    </div>
                </div>
            </div>
            <!--three-->
            <div class="three">
                <div class="middle">
                    <p>数量</p>
                    <!--加减按钮-->
                    <div id="jj">
                        <span @click="subtract">-</span>
                        <span>{{count}}</span>
                        <span @click="add">+</span>
                    </div>
                </div>
            </div>
            <!--four-->
            <div class="four">
                <div class="last" @click="addto()" :class="{red:bck}">
                    {{jiaru}}
                </div>
                <div class="liji"></div>
            </div>
        </div>
        <!--用来撑高度-->
        <div style="height:50px "></div>
        <!--footer-->
        <div class="footer">
            <!--购物车和关注-->
            <router-link to="/Car" class="gg">
                <div><i class="iconfont icon-gouwuche"></i>购物车</div>
                <div><i class="iconfont icon-xin-copy"></i>关注</div>
            </router-link>
            <!--加入购物车-->
            <div class="j" v-on:click="add1();flag=!flag">加入购物车</div>
            <!--立即购买-->
            <div class="li" v-on:click="bbb();flag=!flag">立即购买</div>
        </div>
        <!--遮罩层-->
        <div v-on:click="flag=!flag" :class="{zhe:flag,zhe:!flag}">

        </div>
        <!-- 加入购物车成功提示框 -->
        <div class="tsk">加购成功</div>
        <!-- 没选择商品规格提示框 -->
        <div class="tsk2">请选择商品规格</div>
    </div>
</template>

<style lang="less" scoped>
    /*初始化*/
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        list-style: none;
        text-decoration: none;
    }
    .box1{
        position: fixed;
        top:0;
        width: 100%;
        height: 50px;
        font-size: 14px;
        text-align: center;
        line-height: 53px;
        border-bottom: 1px solid #d8d8d8;
        /*position: relative;*/
        background: #ffffff;
        span{
            color: #000000;
        }
        a{
            position: absolute;
            left: 0;
            top: 0;
            width: 50px;
            height: 50px;
            background: url("../../public/img/arrow-left.png") no-repeat center center;
            background-size: 50%;
        }
    }
    .box2{
        margin-top: 50px;
    }
    .section{
        padding: 0 10px;
        .xiao1{
            p:nth-child(1){
                color: #cc0000;
                text-align: center;
                padding: 5px;
                font-size: 16px;
            }
            p:nth-child(2){
                font-size: 16px;
                text-align: center;
                color: #000000;
                border-bottom: 1px solid #cccccc;
                padding-bottom: 10px;
            }
        }
        .xiao2{
            font-size: 14px;
            display: flex;
            justify-content: space-between;
            padding: 10px 0;
            color: #000000;
            border-bottom: 1px solid #cccccc;
            span:nth-child(1){
                color: #cc0000;
            }
        }
        .xiao3{
            display: flex;
            width: 100%;
            justify-content: space-between;
            padding: 10px 0;
            text-align: center;
            line-height: 20px;
            font-size: 14px;
        }
    }

    /*弹框*/
    /*定位*/
    .tan{
        background: #ffffff;
        position: fixed;
        bottom: -500px;
        width: 100%;
        z-index: 1;
        /*one*/
        .one{
            width: 100%;
            display: flex;
            position: relative;
            /*装图片的盒子*/
            div:nth-child(1){
                width: 27%;
                margin-left: 15px;
                position: absolute;
                top: -25px;
                img{
                    width: 100%;
                    border-radius: 5px;
                }
            }
            /*文本*/
            div:nth-child(2){
                width: 70%;
                padding-left: 10px;
                font-size: 16px;
                margin-left: 120px;
                p:nth-child(1){
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 184px;
                    color: #000000;
                    padding: 3px 0;
                }
                p:nth-child(2){
                    span:nth-child(1){
                        color: #c4c4c4;
                        text-decoration: line-through;
                    }
                    span:nth-child(2){
                        color: #cc0000;
                        padding-left: 3px;
                    }
                }
                p:nth-child(3){
                    font-size: 14px;
                }
            }
            /*关闭的盒子*/
            div:nth-child(3){
                width: 30px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid #cccccc;
                text-align: center;
                line-height: 30px;
                font-size: 20px;
                position: absolute;
                right: 11px;
                top: 8px;
            }
        }

    }
    /*two*/
   .two{
       margin-top: 12px;
       border-top: 1px solid #cccccc;
       .small{
           padding: 5px 15px;
           margin-top: 12px;
           font-size: 16px;
           div{
               display: flex;
               margin-top: 7px;
                 //点击弹框里面的规格加类
              .change{
                 background: #cc0000 !important;
                 color: #ffffff !important;
                }
               p:nth-child(1){
                   width: 57px;
                   height: 31px;
                   background: #f5f5f5;
                   color: #353535;
                   line-height: 31px;
                   text-align: center;
                   cursor: pointer;
               }
               p:nth-child(2){
                   width: 88px;
                   height: 31px;
                   background: #f5f5f5;
                   color: #353535;
                   line-height: 31px;
                   text-align: center;
                   cursor: pointer;
                   margin-left: 17px;
               }
               p:nth-child(3){
                   width: 88px;
                   height: 31px;
                   background: #f5f5f5;
                   color: #353535;
                   line-height: 31px;
                   text-align: center;
                   cursor: pointer;
                   margin-left: 17px;
               }
           }
       }
   }
    /*three*/
    .three{
        // margin-top: 12px;
        border-top: 1px solid #cccccc;
        .middle{
            display: flex;
            justify-content: space-between;
            padding: 5px 15px;
            margin-top: 12px;
            font-size: 16px;
            p{
                font-weight: bold;
                color: #000000;
            }
            div{
                width: 90px;
                display: flex;
                justify-content: space-evenly;
                span:nth-child(2n-1){
                    width: 23px;
                    height: 23px;
                    line-height: 20px;
                    background: #abaaaa;
                    text-align: center;
                    /*border-color:#F1F1F1 ;*/
                    color: white;
                    outline: none;
                    border-radius: 50%;
                    font-size: 20px;
                }
            }
        }
    }
    /*第四个*/
    .four{
        margin-top: 20px;
        border-top: 1px solid #cccccc;
        .last{
            width: 100%;
            height: 55px;
            background: #000000;
            text-align: center;
            line-height: 55px;
            color: #ffffff;
            font-size: 18px;
            margin-top: 12px;
        }
    }

    /*显示隐藏弹框盒子*/
    .btn{
        transition: all linear 0.5s;
        bottom: -400px;
    }
    .btn1{
        transition: all linear 0.5s;
        bottom: 0;
    }
    .zhe{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: #000000;
        opacity: 0.6;
        transition: all linear 0.5s;
    }

    /*底部*/
    .footer{
        width: 100%;
        /*padding: 10px 0;*/
        display: flex;
        background: white;
        position: fixed;
        bottom: 0;
        .gg{
            background: #FAFAFB;
            font-size: 14px;
            width: 33.3%;
            display: flex;
            color: #000000;
            i{
                font-size: 25px;
                height: 30px;
            }
            div{
                width: 50%;
                border: 1px solid #cccccc;
                display: flex;
                align-items: center;
                flex-direction: column;
            }
            // div:nth-child(1){

            // }
        }
        .j{
            width:33.3% ;
            font-size: 16px;
            color: #ffffff;
            height: 52px;
            line-height: 52px;
            text-align: center;
            background: #000000;
        }
        .li{
            width: 33.3%;
            font-size: 16px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            background: #cc0000;
            color: #ffffff;
            a{
                color: #ffffff;
            }
        }
    }
    .tsk{
        width: 170px;
        height: 75px;
        line-height: 75px;
        text-align: center;
        background: #000;
        opacity: 0;
        color: #c2c5c9;
        font-size: 30px;
        border-radius: 6px;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        transition: all linear 0.3s;
    }
    .tsk2{
        width: 120px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #000;
        opacity: 0;
        color: #fff;
        font-size: 13px;
        border-radius: 4px;
        position: fixed;
        bottom: 68px;
        z-index: 1;
        left: 125px;
        transition: all linear 0.3s;
    }
    .red{
        background: #cc0000 !important;
    }
</style>

<script>
    import $ from 'jquery';
    // 引入事件中央中线
    // import bus from  '@/bus.js';
    export default {
        data(){
          return {
              flag:true,//定义遮罩层的开关和弹框的开关
              count:1,//弹框里面的数量值
              obj1:this.$route.params.obj1,//Home.vue传过来的对象
              obj1:'',//后台对象的数据
              flag1:3,//规格里面的切换样式
              span:'',//已选规格默认为空
              qian:'',//删除线的钱
              flag3:false,//加购成功提示框
              flag4:false,//没选规格提示框
              jiaru:'',//加入购物车文本
              bck:false,//给立即购买加类的开关
          }
        },
        methods:{
            //减法
            subtract(){
               if(this.count<=1){
                   alert("亲，宝贝不能再减少了")
                   this.count=1;
               }else{
                   this.count-=1;
               }
            },
            //加法
            add(){
                this.count++;
            },
            //返回到上级页面
            back(){
                this.$router.go(-1)
            },
             //详情页面里面的加入购物车事件
            add1(){
                this.jiaru="加入购物车";
                 this.bck=false;
            },
            //详情页面外面的立即购买事件
            bbb(){
                this.jiaru="立即购买";
                this.bck=true;
            },
            //弹框加入购物车事件 把拿到的数据传入到store文件里面的index.js文件中
            addto(){
                //this.flag=!this.flag;//点击加入购物车 弹框缩起
                if(this.jiaru=="加入购物车" && this.span!==""){//并且规格里面的值为空时，控制
                    this.flag=true;//点击加入购物车弹框不缩起
                    this.flag3=true;//加购成功提示框显示
                    $('.tsk').css('opacity','1');
                    setTimeout(()=>{
                        $('.tsk').css('opacity','0')
                    },1000)//1秒钟消失
                }else{
                    //this.flag=!this.flag;//点击加入购物车 弹框缩起
                }
                if(this.span==''){
                    this.flag4=true;//规格提示框显示
                    $('.tsk2').css('opacity','1')
                    setTimeout(()=>{
                        $('.tsk2').css('opacity','0')
                    },1500)//1秒钟消失
                }else{
                    if(this.jiaru=="加入购物车"){//购物车里面的数据
                         //定义一个空的对象接收下面的数据
                        var obj={};
                        obj.src=this.obj1.src;//后台obj1里的src 
                        obj.user=JSON.parse(localStorage.getItem('user')).user;
                        obj.money=this.obj1.money;//后台obj1里的money
                        obj.title=this.obj1.title;//后台obj1里的title
                        obj.num=this.count;//弹框里面的count
                        obj.qian=this.qian;//删除线的钱
                        obj.span=this.span;//弹框里面的规格
                        //算出总价钱
                        obj.zong=this.obj1.money*this.count;
                        //console.log(obj);
                        this.$store.commit("add",obj);
                        console.log("加入成功");
                    
                        if(localStorage.getItem('biao1')==null){//判断本地是否为空
                            //空就存
                            localStorage.setItem('biao1',JSON.stringify([obj]));
                            this.$store.state.arr=[];
                        }else{
                            var arr=JSON.parse(localStorage.getItem('biao1'));
                            //去重
                            for(var i=0;i<arr.length;i++){
                                //如果文本和规格一样  只加数量
                                if(arr[i].title==obj.title&&arr[i].span==obj.span){
                                    arr[i].num=arr[i].num+obj.num;
                                    break;
                                }
                            }
                            if(i==arr.length){
                                arr.push(obj);
                            }
                            localStorage.setItem('biao1',JSON.stringify(arr));
                            this.$store.state.arr=JSON.parse(localStorage.getItem('biao1'));
                        }
                    }else{//结算页面的数据
                         //定义一个空的对象接收下面的数据
                        var obj={};
                        obj.src=this.obj1.src;//后台obj1里的src 
                        obj.money=this.obj1.money;//后台obj1里的money
                        obj.title=this.obj1.title;//后台obj1里的title
                        obj.num=this.count;//弹框里面的count
                        obj.span=this.span;//弹框里面的规格
                        obj.qian=this.qian;//删除线的钱
                        obj.jjj=88;
                        //算出总价钱
                        obj.zong=this.qian*this.count;
                        //console.log(obj);
                        this.$store.commit("add1",obj);
                        //跳转到结算页面
                        this.$router.push({
                            name: "Jiesuan",
                        });
                        //location.href="http://localhost:8080/#/jiesuan";
                    }
                }
            },
            gui1(){
                this.span="吊坠";
                this.qian="2999";
                this.flag1=0;
            },
            gui2(){
                this.span="白18k金";
                this.qian="3999";
                this.flag1=1;
            },
            gui3(){
                this.span="k链套餐";
                this.qian="4999";
                this.flag1=2;
            },
        },
        mounted(){
            //到后端拿数据 在data里面定义一个空的obj1
            var v=localStorage.getItem('obj1')
            this.obj1=JSON.parse(v);//拿到的是字符串 转对象
            //console.log(this.obj1);
        }
    }
</script>